<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .parent1 {
            margin-top: 10px;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            box-shadow: 0 0 10px #ccc;
            resize: both;
        }

        .parent1 .children1 {
            background: red;
            /* 
                baseWidth 是最小限制, 在父元素宽度下, 
                一行尽可能容下更多的子元素, 子元素宽度>= baseWidth 
                若容纳不下则换行, 并扩展/缩减子元素宽度
            */
            flex: 1 1 650px;
            /* flex-grow flex-shrink <flex-basis> */
            padding-bottom: 40px;
            margin: 5px;
        }

        .parent2 {
            display: grid;
            gap: 10px;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            box-shadow: 0 0 10px #ccc;
            padding: 5px;
        }

        .parent2 .children2 {
            background: blue;
            padding-bottom: 40px;
        }

        .parent3 {
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        }

        .egg {
            width: 100px;
            height: 150px;
            background: red;
            border-radius: 50% 50% 50% 50%/ 65% 65% 36% 36%;
        }

        .moon {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            box-shadow: 8px 7px 0 0 blue;
            margin-bottom: 200px;
        }
    </style>
</head>

<body>
    <button id="debounce">debounce</button>
    <button id="throttle">throttle</button>
    <h2>利用 proxy set 实现数据绑定</h2>
    <label for="proxyDataBind" id="proxyDataBindLabel">proxyDataBind</label>
    <input type="text" id="proxyDataBind">
    <script>
        {
            var label = document.getElementById("proxyDataBindLabel")
            var data = document.getElementById("proxyDataBind")
            var dataSet = new Proxy({}, {
                set: function (target, propKey, value) {
                    if (propKey === 'bindInputValue') {
                        target[propKey] = value
                        label.innerText = value
                    }
                }
            })
            data.addEventListener('input', function () {
                console.log(this.value)
                // label.innerText = this.value
                dataSet['bindInputValue'] = this.value
            })
            console.log(label, data)
            var script = document.createElement('script')
            script.src = "../countDown.js"
            script.async = true
            document.body.append(script)
        } 
    </script>
    <h2>requestAnimationFrame</h2>
    <div id="requestAF" style="width:10px;height:100px;background:red;"></div>
    <script>
        {
            function widthTo1000px() {
                var div = document.getElementById('requestAF')
                var width = div.clientWidth
                if (width < window.innerWidth - 20) {
                    div.style.width = width + 5 + 'px'
                    requestAnimationFrame(widthTo1000px)
                }
            }
            widthTo1000px()
            // requestAnimationFrame(widthTo1000px)
            console.log(window.innerWidth)
            console.log(document.style)
        }
    </script>


    <h1>flex: 1 1 650px</h1>
    <div class="parent1">
        <div class="children1">1</div>
        <div class="children1">2</div>
        <div class="children1">3</div>
    </div>

    <h1>auto-fit</h1>
    <div class="parent2">
        <div class="children2">1</div>
        <div class="children2">2</div>
        <div class="children2">3</div>
        <div class="children2">4</div>
    </div>

    <h1>auto-fill</h1>
    <div class="parent3 parent2">
        <div class="children2">1</div>
        <div class="children2">2</div>
        <div class="children2">3</div>
        <div class="children2">4</div>
    </div>

    <h1>🥚和月牙</h1>
    <div class="egg"></div>
    <div class="moon"></div>
    <script src="../debounce & throttle.js"></script>
    <script>
        var $debounce = document.querySelector('#debounce'),
            $throttle = document.querySelector('#throttle');
        var debounceTimer = null,
            throttleTime = null,
            throttleTimeInterval = 3000;

        function debounceFn() {
            console.log('debounce: 不点了?')
        }
        $debounce.onclick = function () {
            if (debounceTimer) {
                console.log('你越点我越不动！')
                clearTimeout(debounceTimer)
            }
            debounceTimer = setTimeout(debounceFn, 1000)
            // debounce(debounceFn, 1000)
        }
        $throttle.onclick = function () {
            let currentTime = +new Date()
            if (!throttleTime || currentTime - throttleTime > throttleTimeInterval) {
                throttleTime = currentTime
                console.log(`无论你怎么点，我就${throttleTimeInterval}ms执行一次。`)
            }
        }
        // console.log(debounce()())
    </script>
</body>

</html>